---
import BoxerClipPlayer from './BoxerClipPlayerCard.astro'
import Youtube from '@/assets/svg/youtube.svg'
import CloseIcon from '@/assets/svg/close.svg'

interface Clip {
  text: string
  url: string
}

interface BoxerClipProps {
  clips?: Clip[]
  externalPlayer?: boolean
}

const { clips = [] } = Astro.props as BoxerClipProps

// Función para extraer el id del clip del video de una URL de YouTube
const extractVideoClipId = (url: string, type: string = 'clip_id') => {
  let match = null
  if (type === 'clip_id') {
    match = url.match(/\/embed\/(.+)/)
  } else {
    match = url.match(/\/embed\/([^?]+)/)
  }
  return match ? match[1] : null
}

const extractVideoIdFromClips = (clips: Clip[]) => {
  const [clip] = clips
  if (!clip) return null
  return extractVideoClipId(clip.url, 'video_id')
}
---

<div
  class="fixed right-0 top-0 h-screen w-full overflow-y-auto rounded-b-none rounded-t-none bg-pink-200/60 text-left backdrop-blur-sm transition-transform group-has-[input:not(:checked)]:translate-x-full sm:max-w-sm"
>
  <div class="sticky top-0 z-40 rounded-b-none rounded-t-none bg-pink-200/60 p-4 backdrop-blur-sm">
    <h5
      id="drawer-disabled-backdrop-label"
      class="text-dark-magenta text-base font-semibold uppercase"
    >
      Clips del combate
    </h5>
    <button
      type="button"
      class="bg-dark-magenta absolute end-2.5 top-2.5 h-8 w-8 rounded-lg text-sm text-gray-400 hover:scale-105"
    >
      <label
        for="clip-drawer-toggle"
        class="inline-flex h-8 w-8 cursor-pointer items-center justify-center"
      >
        <CloseIcon />
        <span class="sr-only">Cerrar menú</span>
      </label>
    </button>
  </div>
  <div class="overflow-y-auto p-4 py-4">
    <ul class="grid gap-4">
      {
        clips.map((clip, i) => (
          <BoxerClipPlayer
            videoId={extractVideoClipId(clip.url, 'video_id')}
            clipId={extractVideoClipId(clip.url, 'clip_id')}
            text={clip.text}
          />
        ))
      }
    </ul>
    {
      clips.length > 0 && (
        <a
          class="mt-4 flex items-center justify-center rounded-lg bg-red-700 text-sm lowercase text-white hover:bg-red-600"
          href={`https://www.youtube.com/watch?v=${extractVideoIdFromClips(clips)}`}
          target="_blank"
        >
          <Youtube class="mr-2 inline-flex w-4" />
          <span class="text-sm">Ver video completo</span>
        </a>
      )
    }
  </div>
</div>
